<template>
  <div>
    <el-row type="flex" justify="space-between" class="button-box">
      <el-col :span="6" class="left">
        <el-input placeholder="输入 产品名称/描述 查询" class="search-input" v-model="params.search">
          <el-button slot="append" @click="searchProduct">搜索</el-button>
        </el-input>
      </el-col>
      <el-col :span="18" class="right">
        <el-button type="primary" @click="searchProduct">刷新</el-button>
        <el-button type="primary" @click="createProduct">创建产品</el-button>
      </el-col>
    </el-row>
    <product-table :listLoading="listLoading" :tableColumn="tableColumn" :tableData="tableData" :total="total" :currentPage="currentPage" :pageSize="pageSize" @actionClick="actionClick" :buttonGroup="buttonGroup" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
      <template slot="crtime" slot-scope="scope">
        <span>{{ scope.row.crtime | crtimeFilter }}</span>
      </template>
      <template slot="nodeType" slot-scope="scope">
        <span>{{ scope.row.nodeType | nodeTypeFilter }}</span>
      </template>
    </product-table>

    <product-template :title="submitIndex === 0 ? '创建产品':'编辑产品'" :dialogVisible.sync="dialogVisible" @submitForm="submitForm" :form="form" :editFlag="editFlag"></product-template>
  </div>
</template>

<script>
  import utilMixin from '@views/mixin/systemUtil'
  import ProductTable from '@components/Table'
  import ProductTemplate from '@views/product/components/ProductTemplate'
  import { getProductList, addProduct, getProductDetail, updateProduct } from '@api/product'
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    components: {
      ProductTable,
      ProductTemplate
    },
    mixins: [utilMixin]
  })
  export default class ProductIndex extends Vue {
    data() {
      return {
        dialogVisible: false, //form表单是否显示
        form: {}, //form表单提交对象
        editFlag: false, //是否编辑模式
        submitIndex: 0, //表单确定按钮回调索引 0新增 1编辑
        tableColumn: [ //表格列对象
          { type: "name", name: "产品名称", operate: false },
          { type: "key", name: "ProductKey", operate: false },
          { type: "nodeType", name: "节点类型", operate: true },
          { type: "deviceCount", name: "设备总数", operate: false },
          { type: "desc", name: "描述", operate: false },
          { type: "crtime", name: "创建时间", operate: true }
        ],
        tableData: [], //表格数据
        currentPage: 1, //当前页码
        buttonGroup: [{ name: '查看' }, { name: '编辑' }] //表格按钮数组
      }
    }
    mounted() {
      this.params.offset = this.startOffsetNum;
      this.params.limit = this.pageSize;

      this.$nextTick(function() {
        this.fetchData();
      })
    }
    @Watch('pageSize')
    pageSizeChange(val) { //监听一页数量
      this.params.limit = val;
      this.fetchData();
    }
    @Watch('pageIndex')
    pageIndexChange(val) { //监听页码索引
      this.currentPage = val - 0 + 1;
      this.params.offset = this.startOffsetNum;
      this.fetchData();
    }
    fetchData() { //初始化表格数据
      this.listLoading = true
      getProductList(this.params).then(response => {
        let res = response.data;
        if (res.status) {
          this.tableData = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        } else {
          this.showMessage(res.message, 'error');
        }
      }, error => {
        this.listLoading = false;
      })
    }
    createProduct() { //创建产品
      this.form = {};
      this.submitIndex = 0;
      this.dialogVisible = true;
    }
    actionClick(rowData, index) { //表单按钮组回调方法
      //1查看 2编辑
      switch (index) {
        case 1:
          this.queryClick(rowData);
          break;
        case 2:
          this.submitIndex = 1;
          this.editClick(rowData);
          break;
      }
    }
    queryClick(rowData) { //查看
      this.$router.push("/product/index/detail/" + rowData.id);
    }
    submitForm(form) { //表单提交方法
      this.listLoading = true;
      if (this.submitIndex === 0) {
        addProduct(form).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex, "dialogVisible");
        }, error => {
          this.listLoading = false;
        })
      } else {
        delete form.crtime;
        updateProduct(form).then(response => {
          this.commonSubmitRes(response.data, this.submitIndex, "dialogVisible");
        }, error => {
          this.listLoading = false;
        })
      }
    }
    commonSubmitRes(response, index, dialogVisible) { //提示回调方法
      if (response.status) {
        let message = "";
        switch (index) {
          case 0:
            message = "新增产品成功";
            break;
          case 1:
            message = "编辑产品成功";
            break;
        }
        this.showMessage(message, 'success');
        this.pageIndex = 0;
        this.fetchData();
        this.listLoading = false;
      } else {
        this.showMessage(response.message, 'error');
      }
      this.dialogVisible = false;
    }
    editClick(rowData) { //编辑方法
      // '产品中已包含设备，无法进行删除，删除产品必须先删除产品中已添加的设备'
      getProductDetail(rowData.id).then(response => {
        let res = response.data;
        if (res.status) {
          // this.form = res.data;
          this.form = Object.assign({}, res.data);
          this.dialogVisible = true;
        } else {
          this.showMessage(res.message, 'error');
        }
      })
    }
    searchProduct() { //搜索方法
      this.pageIndex = 0;
      this.fetchData();
    }
  }
</script>
